<ion-view view-title="比赛">
    <button
        id="ballife-games-button-new"
        class="button button-large button-icon icon ion-ios-plus-outline ballife-button-new"
        ng-click="newGame()"></button>
    <ion-content class="no-padding">
        <ion-list>
            <ion-item style="padding:0;" class="card" ng-repeat="game in games">
                <div class="item item-image">
                    <img style="width:100%; height:40vw;" ng-src="{{game.field.img}}">
                </div>
                <div ng-click="toggleDescrip(game)" class="item item-avatar">
                    <img ng-src="{{game.user.header}}">
                    <table>
                        <tr>
                            <td style="text-align:center;"><i class="icon ion-android-person"></i></td>
                            <td style="text-indent:1em;"><h2>{{game.user.name}}（{{game.user.grade}}）</h2></td>
                        </tr>
                        <tr>
                            <td style="text-align:center;"><i class="icon ion-clock"></i></td>
                            <td style="text-indent:1em;">{{game.time}}</td>
                        </tr>
                        <tr>
                            <td style="text-align:center;"><i class="icon ion-location"></i></td>
                            <td style="text-indent:1em;">{{game.field.name}}</td>
                        </tr>
                        <tr>
                            <td style="text-align:center;"><i class="icon ion-information-circled"></i></td>
                            <td style="text-indent:1em;">最低参赛场次：{{game.joinedTimes}}胜率：{{game.rateOfWinning}}</td>
                        </tr>
                    </table>
                </div>
                <div class="item" ng-click="toggleDescrip(game)" ng-hide="game.isDescripHide">
                    <p>{{game.description}}</p>
                </div>
                <div ng-click="join()" style="text-align:center;" class="item row">
                    <span class="col energized">
                        ￥{{game.stake}}
                    </span>
                    <span class="col balanced">
                        {{game.state}}
                    </span>
                    <span class="col">
                        <span class="balanced">{{game.has}}</span>
                            / 
                        <span class="calm">{{game.order}}</span>
                        人
                    </span>
                </div>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>
